<template>
	<view class="newsContent">

		<view class="newsList" v-if="list.length>0">
			<view class="item" v-for="item in list" :key="item.id" @click="itemClick(item)">
				<van-swipe-cell>
					<view class="body">
						<view class="author-img-box">
							<image class="author-img" src="../../static/images/logindj.png"></image>
						</view>
						<view class="text">
							<view class="top">
								<view class="name">
									{{item.msgTitle}}
								</view>
								<view class="time">
									{{item.createTime}}
								</view>
							</view>
							<view class="content">
								{{item.mgsStatus}}
							</view>
						</view>
					</view>
					<template #right>
						<van-button square text="删除" type="danger" class="delete-button" @click="del(item.msgId)" />
					</template>
				</van-swipe-cell>
			</view>
		</view>

		<view class="more" v-else>没有更多消息</view>



	</view>
</template>

<script>
	export default {
		name: "newsContent",
		props: ['list'],
		methods: {

			itemClick(data) {
				this.$dialog.alert({
					title: data.msgTitle,
					message: data.msgContent
				}).then(() => {})
			},
			del(id) {
				this.$dialog.confirm({
					message: '确认删除？',
					beforeClose: ((action, done) => {
						if (action === 'confirm') {
							this.$emit("del", id);
							done();
						} else {
							done();
						}
					})
				});
			}
		}
	}
</script>

<style>
	.newsContent {
		width: 100%;
		background: #ffffff;
	}

	.newsList {
		width: 100%;
		background: #ffffff;

	}

	.item {
		width: 100%;
		height: 130rpx;
		padding-top: 5rpx;
		padding-bottom: 4rpx;
		border-top: 1rpx solid #f1f1f1;
		box-sizing: 0 0 2px 2px #f1f1f1 ;
		
	}

	.body {
		padding-top: 5rpx;
		padding-bottom: 5rpx;
	}

	.delete-button {
		height: 130rpx;
		width: 130rpx;
	}

	.author-img-box {
		float: left;
		padding-top: 20rpx;
		margin-left: 15rpx;
	}

	.author-img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}

	.text {
		margin-top: 20rpx;
		float: left;
		margin-left: 10rpx;
		height: 50rpx;
		width: 75%;
		color: #000000;
	}

	.top {
		height: 65rpx;
		line-height: 50rpx;
		width: 620rpx;
	}

	.name {
		float: left;
		font-size: 30rpx;
	}

	.time {
		float: right;
		font-size: 11px;
		margin-left: 20rpx;
		color: #aaaaaa;
	}

	.content {
		height: 25rpx;
		line-height: 25rpx;
		font-size: 25rpx;
		color: #aaaaaa;
	}

	.more {
		width: 90%;
		height: 50px;
		line-height: 50px;
		color: #000000;
		text-align: center;
		font-size: 12px;
	}
</style>
